<template>
  <div class="content-frame">
    <el-header elevation="0" outlined class="header">
      <div class="header-start">
        <div class="logo">永乐 DEMO</div>
        <el-menu
          class="header-menu-start"
          mode="horizontal"
          @select="headerStartRouter"
        >
          <el-menu-item
            class="header-menu-item"
            v-for="m in headerStartMenuObj"
            :key="m.index"
            :index="m.index.toString()"
            >{{ m.name }}</el-menu-item
          >
        </el-menu>
      </div>
      <div class="header-end">
        <el-menu
          class="header-menu-end"
          mode="horizontal"
          @select="headerEndRouter"
        >
          <el-menu-item
            class="header-menu-item"
            v-for="m in headerEndMenuObj"
            :key="m.index"
            :index="m.index.toString()"
            >{{ m.name }}</el-menu-item
          >
        </el-menu>
        <el-avatar class="avatar-item" :size="32" :src="avatarUrl"></el-avatar>
      </div>
    </el-header>
    <div class="module-frame">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import '@/assets/home.css'
import { MenuQuery } from '@/utils/MenuController.js'
import { AvatarInfo } from '@/utils/UserController'
export default {
  data() {
    return {
      avatarUrl: AvatarInfo('user').getData()[0].url,
      headerStartMenuObj: MenuQuery('currentUser', 'header-start').getData(),
      headerEndMenuObj: MenuQuery('currentUser', 'header-end').getData()
    }
  },
  methods: {
    headerStartRouter: function (key) {
      this.$router.push(this.headerStartMenuObj[key].routerPath)
    },
    headerEndRouter: function (key) {
      this.$router.push(this.headerEndMenuObj[key].routerPath)
    }
  }
}
</script>

<style></style>
